<template>
	<!-- photo -->
	<div v-show="file == ''" class="push">
		<el-icon style="color: #c0ccda;margin: auto;">
			<Plus />
		</el-icon>
		<input class="file" type="file" accept="video/*" @change="handleValue($event.target.files)">
	</div>
	<div v-show="file != ''" style="height: 180px;position: relative;overflow: hidden;">
		<video :src="file" controls="controls" style="width: 100%; height: 100% !important; border-radius: 10px;">
			您的浏览器不支持 video 标签。
		</video>
		<div class="remove" style="width: 100%;">
			<el-icon @click="handleRemove()">
				<Delete />
			</el-icon>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import { File } from '@/api';
let emit = defineEmits(['update:modelValue', 'change']);
let props = defineProps({
	modelValue: {
		type: String,
		default: '',
	}
});
let file = ref('');
let handleValue = async (value) => {
	console.log(value);
	let { status, msg, data } = await File.video_upload({
		'file': value[0],
		'chunkNumber': 1,
		'chunkSize': value[0].size,
		'currentChunkSize': 1663283,
		'filename': value[0].name,
		'totalChunks': 1,
		'md5': '66802221a95f4b8d06da13fd47b167da',
	});
	if (status == 200) {
		ElMessage.success(msg);
		file.value = data.file_path;
		emit('update:modelValue', data.file_path);
		emit('change', data.file_path);
	}
};
let handleRemove = () => {
	file.value = '';
	emit('update:modelValue', '');
	emit('change', '');
}
</script>

<style lang="less" scoped>
.push {
	position: relative;
	width: 56.4px;
	height: 56.4px;
	border: 1px dashed;
	border-color: #c0c0c0;
	border-radius: 4px;
	display: flex;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);
	cursor: pointer;
	margin-right: 20px;

	.file {
		width: 56.4px;
		height: 56.4px;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
	}
}

.remove {
	position: absolute;
	background-color: rgba(0, 0, 0, .5);
	top: 0;
	width: 40%;
	height: 30px;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	color: #fff;
	text-align: center;
	line-height: 30px;
}
</style>
